// /     *添加计划页面********** ************* ************* *********** *******
import { Form, Input, DatePicker, Space, Button, Modal, Cascader } from "antd";

const { RangePicker } = DatePicker;
import React, { useEffect, useState, useContext } from "react";
import storeContext from "@/context/storeContext";
import { addplan } from "@/utils/index"
import style from "./addplan.less";
import "./addplan.less";
import { getClassStudent } from "@/services";

interface IArr {
  name: string,
  [key: string]: any
}

const Addplan: React.FC = (props) => {
  let { addplan } = useContext(storeContext)
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };
  // 关闭弹框
  const handleOk = () => {
    setIsModalVisible(false);
  };
  // 关闭弹框
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const options = [
    {
      value: '请选择班级',
      label: '2021A班',
    }
  ];
  // 弹框弹出,
  const onOKK = () => {
    console.log(1)
  }

  let [flag, setFlag] = useState(false)
  let [unumber, setunumber] = useState(0);
  let [newarr, setnewarr] = useState<addplan[]>([]);
  let [date, setDate] = useState<IArr[]>([])
  //處罰默認的接口
  useEffect(() => {
    // 获取数据
    getClassStudent().then(ok => {
      if (ok.code == 200) {
        ok.data.map(item => {
          item.flag = false
          return item
        })
        setnewarr(ok.data)
      }
    })
  }, []);

  useEffect(() => {
    let flag = newarr.every(item => item.flag)
    setFlag(flag)
  }, [newarr])

  // 全选
  const checkall = () => {
    setFlag(!flag)
    newarr.forEach(item => {
      item.flag = !flag
    })

  }
  // 反选
  const check = function (id: string) {
    let arr = newarr.map(item => {
      if (item.id == id) {
        item.flag = !item.flag
        return item
      } else {
        return item
      }
    })
    setnewarr(arr)
  }

  //新建分组
  let num = 1;
  const addArr = function () {
    date.push({ name: `组${num++}`, list: [] })
    setDate(date)
    console.log(date)
  }

  const addList = function (index: number) {
    let a = date[index].list.push(newarr.filter(item => item.flag))
    setDate(date)

    newarr.filter(item => !item.flag)
    setnewarr(newarr)
  }
  return <div className={style.addplan}>
    <div className={style.header}>
      <div className={style.planList_headers}>
        <div aria-label="Breadcrumb" role="navigation" className={style.el_breadcrumb}>
          <span className={style.el_breadcrumb__item}>
            <span role="link" className={style.el_breadcrumb__inner}>计划</span>
            <span role="presentation" className={style.el_breadcrumb__separator}>/</span>
          </span>
          <span className={style.el_breadcrumb__item} aria-current="page">
            <span role="link" className={style.el_breadcrumb__inner}>添加计划</span>
            <span role="presentation" className={style.el_breadcrumb__separator}></span>
          </span>
        </div>
      </div>
    </div>
    <div className={style.main}>
      <div className={style.main_cont}>
        <p className={style.p1}>
          <div className={style.plan_wrap_tit_box_line}></div>
          <div className={style.plan_wrap_tit_box_text}>添加计划</div>
        </p>
        <div className={style.plan_wrap_content}>
          <Form>
            <div className={style.plan_wrap_conten1}>
              <div>
                <Form.Item label="班级" style={{ width: "200px", fontSize: "16px", height: '40px' }} >
                  <Cascader options={options} onChange={() => { onOKK() }} placeholder="请选择班级" />,
                </Form.Item>
              </div>
              <div>
                <Form.Item label="成员" style={{ fontSize: "16px" }}>
                  <Input disabled defaultValue={10} style={{ height: "36px" }} />
                </Form.Item>
              </div>
              <div>
                <Form.Item label="分组" >
                  <Input type="number" style={{ width: "94px", height: "36px" }} defaultValue={1} onChange={(e) => {
                    setunumber(Number(e.target.value))
                  }} />
                </Form.Item>
              </div>
            </div>
            <div className={style.plan_wrap_conten2}>

              <Form.Item label="班级" >
                <Input type="text" style={{ width: "328px", height: "36px" }} placeholder="请输入计划"></Input>
              </Form.Item>
            </div>
            <div className={style.plan_wrap_conten3}>
              <Form.Item label="日期">
                <Space direction="vertical" size={12}>
                  <RangePicker separator="至" placeholder={["开始日期", "结束日期"]} format="YYYY-MM-DD HH:mm:ss" />
                </Space>
              </Form.Item>
            </div>
            <div className={style.plan_warp_conten4}>
              <Form.Item >
                <Button type="primary" style={{ margin: "10px 60px", width: "98px", height: "34px" }} onClick={showModal}>
                  自动分组
                </Button>
                <Button type="primary" style={{ margin: "10px 0px", width: "98px", height: "34px" }} onClick={showModal}>
                  手动分组
                </Button>
              </Form.Item>
            </div>
          </Form>
        </div>
      </div>
    </div>
{/* 
    <div>
      <div><span>分组</span><span>{newarr.filter(item => item.flag).length}/{newarr.length}</span></div>
      <div>
        <div>
          <div><input type="checkbox" checked={flag} onChange={() => { checkall() }} />全选</div>
          <div>
            {
              newarr.map((item, index) => {
                return <div key={index}>
                  <input type="checkbox" checked={item.flag as boolean} onChange={() => { check(item.id) }} />
                  <img style={{ width: "30px", height: "30px", borderRadius: "50px" }} src={`http://111.203.59.61:8060${item.avatar}`} alt="" />
                  <span>{item.username}</span>
                </div>
              })
            }
          </div>
        </div>
        <div>
          <div>当前已分{ }个小组</div>
          <div onClick={() => { addArr() }}>+创建小组</div>
          <div>
            {
              date.map((item, index) => {
                return <dl key={index}>
                  <dt>
                    <span onClick={() => { addList(index) }}>+</span>
                    <span>{item.name}</span>
                    <span>删除</span>
                  </dt>
                  <dd>
                    {
                      item.list.map((e: any, i: number) => {
                        return <dl key={i}>
                          <dt>
                            <img style={{ width: "30px", height: "30px", borderRadius: "50px" }} src={`http://111.203.59.61:8060${e.avatar}`} alt="" />
                          </dt>
                          <dd> <span>{e.username}</span></dd>
                        </dl>
                      })
                    }
                  </dd>
                </dl>
              })}
          </div>
        </div>
      </div>
    </div> */}
    <Modal style={{ display: "flex", flexDirection: "row" }} title="分組" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <div style={{ width: "400px", height: "400px", display: "flex" }}>
        <div style={{ width: "95px", height: "100%", backgroundColor: "#ccc" }}>
          <p><input type="checkbox" checked={flag} onChange={() => { checkall() }} />全選</p>
          <div style={{ width: "96px", height: "95%", display: "flex", flexDirection: "column", overflow: "scroll" }}>
            {
              newarr.map((item, index) => {
                return <div key={index}>
                  <input type="checkbox" checked={item.flag as boolean} onChange={() => { check(item.id) }} />
                  <img style={{ width: "30px", height: "30px", borderRadius: "50px" }} src={`http://111.203.59.61:8060${item.avatar}`} alt="" />
                  <span>{item.username}</span>
                </div>
              })
            }
            {
              console.log(newarr)
            }
          </div>
        </div>
        <div style={{ width: '300px', padding: "0 40px 20px" }}>
          <p>當前已分0個組</p>
          <p></p>
        </div>

      </div>
    </Modal>
  </div>
}


export default Addplan

//  添加計劃頁面  ********** ************* ************* *********** *******